<!-- 轮播图、快讯、深度资讯配置 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <!-- <a-col :md="8" :sm="24">
                        <a-form-item label="账户类型">
                            <a-select v-model="accountType" placeholder="请选择" allowClear @change="getBanner()">
                                <a-select-option v-for="(item,i) in accountTypeList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col> -->
                    <a-col :md="8" :sm="24">
                        <a-form-item label="层级">
                            <a-select v-model="level" placeholder="请选择" allowClear @change="getBanner()">
                                <a-select-option v-for="(item,i) in 30" :key="i" :value="i">
                                    <span v-if="i == 0">奖励本人</span>
                                    <span v-else-if="i == 1">直推上级</span>
                                    <span v-else-if="i == 2">间推上级</span>
                                    <span v-else>{{i}}层上级</span>
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="状态">
                            <a-select v-model="status" placeholder="请选择" allowClear @change="getBanner()">
                                <a-select-option v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :md="16" :sm="24">
                    </a-col> -->
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <span>总开关：</span>
                            <a-switch checked-children="开" un-checked-children="关" :checked="allItem.onOff == 1 ? true : false" @change="changeAllOnOff"/>
                            <!-- <a-button style="margin-left: 20px" type="primary" @click="getAllData()">查询</a-button> -->
                            <a-button style="margin-left: 20px" type="primary" icon="plus" @click="add()">新增</a-button>
                            <!-- <a-button icon="plus" @click="add()">新增</a-button> -->
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-tabs v-model="moduleClassificationId" @change="changeClassification">
            <a-tab-pane v-for="(item) in moduleClassificationList" :key="item.id" :tab="item.name">
                <a-table rowKey="id" :loading="isload" @change="handleTableChange" :columns="columns" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}" :data-source="dataList"  size="small" >
                    <div slot="level" slot-scope="level">
                        <!-- <div v-for="(item,i) in 30" :key="i">
                            <span v-if="level == item">{{item}}</span>
                        </div> -->
                        <span v-if="level == 0">奖励本人</span>
                        <span v-else-if="level == 1">直推上级</span>
                        <span v-else-if="level == 2">间推上级</span>
                        <span v-else>{{level}}层上级</span>
                    </div>
                    <div slot="grade" slot-scope="grade">
                        <div v-for="(item,i) in gradeList" :key="item.id">
                            <a-tag v-if="item.grade == grade" :color="colors[i]">{{item.gradeName}}</a-tag>
                        </div>
                    </div>
                    <div slot="awardNumber" slot-scope="awardNumber,record">
                        <span v-if="record.isPercent == 1">{{awardNumber * 100}}%</span>
                        <span v-else>{{awardNumber}}{{record.accountType == 0 ? '元' : '能量水晶'}}</span>
                    </div>
                    <div slot="isPercent" slot-scope="isPercent">
                        <a-switch checked-children="是" un-checked-children="否" disabled :checked="isPercent == 1 ? true : false" />
                    </div>
                    <div slot="onOff" slot-scope="onOff">
                        <a-switch checked-children="开" un-checked-children="关" disabled :checked="onOff == 1 ? true : false" />
                    </div>
                    <img class="imgUrl" slot="imageUrl" slot-scope="imageUrl" :src="imageUrl && imageUrl.split(',')[0]" alt="" @click="showImg(imageUrl)">
                    <template slot="operation" slot-scope="text, record">
                        <div class="editable-row-operations">
                            <a-button type="link" @click="update(record)">修改</a-button>
                            <a-popconfirm
                                title="是否确认删除当前数据?"
                                ok-text="Yes"
                                cancel-text="No"
                                @confirm="del(record)"
                            >
                                <a-button type="link">删除</a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>

        

        <a-modal
            title="添加、修改层级奖励数量配置"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="visible = false"
            >
            <div>
                <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
                    <a-form-item label="等级">
                        <a-select v-model="item.grade" placeholder="请选择" allowClear>
                            <a-select-option v-for="(item,i) in gradeList" :key="i" :value="item.grade">{{item.gradeName}}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="层级">
                        <a-select v-model="item.level" placeholder="请选择" allowClear>
                            <a-select-option v-for="(item,i) in 30" :key="i" :value="i">
                                <span v-if="i == 0">奖励本人</span>
                                <span v-else-if="i == 1">直推上级</span>
                                <span v-else-if="i == 2">间推上级</span>
                                <span v-else>{{i}}层上级</span>
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="奖励数量">
                        <a-input v-model="item.awardNumber" placeholder="请输入奖励数量" allow-clear :suffix="item.isPercent == 1 ? '%' : ''"></a-input>
                    </a-form-item>
                    <a-form-item label="是否按比例发放奖励">
                        <a-radio-group v-model="item.isPercent" >
                            <a-radio :value="1">是</a-radio>
                            <a-radio :value="0">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="是否开启">
                        <a-radio-group v-model="item.onOff" >
                            <a-radio  v-for="(item,i) in statusList" :key="i" :value="item.id">{{item.name}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>


</template>

<script>
import { columns } from './table'
import { queryAwardModelNumberConfig , updateAwardModelNumberConfig , queryGradeProduct } from '@/api/product'
import { getBase64 , fileProcess } from '@/utils/util';
// import { queryBrand }  from '@/api/brand';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            page: 1,
            size: 10,
            total: 0,
            dataList: [],
            columns,
            isload: false,
            moduleClassificationList: [
                // { id: 11, name: '消费'},
                // { id: 12, name: '还款'},
                // { id: 13, name: '快捷'},
                // { id: 14, name: '提现'},
                { id: 15, name: '返利'},
                { id: 10, name: '购买商品'},
                { id: 4, name: '话费/会员权益'},
                { id: 16, name: 'CPA任务'},
            ],
            accountType: '0',
            accountTypeList: [
                { id: 0, name: 'CNY'},
                // { id: 6, name: '能量水晶'},
            ],
            moduleClassificationId: 15,
            status: undefined,
            statusList: [
                { id: 1, name: '开启'},
                { id: 0, name: '关闭'},
            ],
            level: undefined,
            levelList: [
                { id: 1, name: '直推'},
                { id: 2, name: '间推'},
            ],
            visible: false,
            confirmLoading: false,
            item: {
                id: '',
                awardModel: '', // 奖励类型  0：全局开关，1：大数据，2：信用卡，3：话费充值，4：会员权益
                accountType: '0', // 帐户类型，0：CNY，6：能量水晶
                level: '', // 层级，1：直推，2：间推
                grade: undefined, // 等级
                awardNumber: '', // 奖励数量
                onOff: 1, // 状态(0:下架,1:上架)
                isPercent: 0, // 是否按比例发放奖励
            },
            gradeList: [],
            activeKey: 1,
            colors: ['blue','purple','cyan','green','orange','red','pink','blueviolet'],
            allItem : {
                id: '',
                awardModel: '', // 奖励类型  0：全局开关，1：大数据，2：信用卡，3：话费充值，4：会员权益
                accountType: '0', // 帐户类型，0：CNY，6：能量水晶
                level: '', // 层级，1：直推，2：间推
                grade: undefined, // 等级
                awardNumber: '', // 奖励数量
                onOff: '1', // 状态(0:下架,1:上架)
                isPercent: '0', // 是否按比例发放奖励
            },
        }
    },
    async created(){
        try {
            // await this.getBrand()
            this.gradeList = await this.getGrade(this.brandId)
            this.getBanner(0)
            this.getAllData()
        } catch (error) {
            this.$notification['error']({
                message: '提示',
                description: '网路丢失，请稍后再试！',
                duration: 8,
            })
        }
    },
    methods: {
        getBrand(){
            let _this = this
            let page = 0
            const fn = function(resolve){
                const params = {
                    'size':99,
                    'page':page,
                }
                queryBrand(params)
                .then(res=>{
                    if(res.success){
                        if(page == 0){
                            _this.brandList = res.data.content
                        }else{
                            _this.brandList = [..._this.brandList,...res.data.content]
                        }
                        if((res.data.totalElements > (page + 1) * 99)){
                            page++;
                            fn(resolve)
                        }else{
                            _this.brandId = res.data.content[res.data.content.length - 1].id
                            resolve()
                        }
                    }else{
                        _this.$notification['error']({
                            message: '提示',
                            description: res.errMessage,
                            duration: 8,
                        })
                    }
                })
            }
            return new Promise((resolve,rej)=>{
                fn(resolve)
            })
        },
        // 查询等级信息
        getGrade(brandId){
            let _this = this
            return new Promise((resolve,reject)=>{
                const params = {
                    'brandId':brandId,
                    'size':99,
                    'page':0,
                }
                queryGradeProduct(params)
                .then(res=>{
                    if(res.success){
                        resolve(res.data.content)
                    }else{
                        reject()
                    }
                })
            })
        },
        // 查询产品详情信息配置
        getBanner(awardModel){
            var _this = this
            _this.isload = true
            const params = {
                brandId: _this.brandId,
                awardModel: awardModel === 0 ? awardModel : _this.moduleClassificationId,
                accountType:_this.accountType,
                level: _this.level,
                onOff:_this.status,
                page: _this.page - 1,
                size: _this.size,
            }
            queryAwardModelNumberConfig(params)
            .then(res=>{
                if(res.success){
                    if(awardModel === 0 && res.data.content.length > 0){
                        _this.allItem = JSON.parse(JSON.stringify(res.data.content[0]));
                    }else{
                        _this.dataList = res.data.content
                        _this.total = res.data.totalElements
                    }
                    _this.isload = false
                    console.log(_this.dataList,'dataList')
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        add(){
            if(!this.brandId){
                this.$message.warning('请先选择品牌！')
                return
            }
            this.item.awardModel = this.activeKey
            this.item.id = ''
            this.item.brandId = this.brandId
            this.item.accountType = '0'
            this.item.level = undefined
            this.item.isPercent = 1
            this.item.awardNumber = ''
            this.item.onOff = 1
            this.visible = true
        },
        async update(record) {
            this.item = JSON.parse(JSON.stringify(record))
            console.log(this.item,'item')
            if(record.isPercent == 1){
                this.item.awardNumber = record.awardNumber * 100
            }
            this.visible = true
        },
        del(record) {
            const params = {
                'brandId': record.brandId,
                'id': record.id,
                'awardModel': record.awardModel,
                'accountType': record.accountType,
                'level': record.level,
                'isPercent': record.isPercent,
                'onOff': record.onOff,
                'awardNumber': record.awardNumber,
                'isDelete': 1,
            }
            updateAwardModelNumberConfig(params)
            .then(res=>{
                if(res.success){
                    this.$notification['success']({
                        message: '提示',
                        description: '删除成功',
                        duration: 8,
                    })
                    this.getBanner()
                }else{
                    this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 确定添加、修改轮播图
        handleOk(){
            console.log(this.item,'itm')
            console.log(this.fileList,'filelist')
            var _this = this
            if(_this.item.accountType === undefined){
                this.$message.warning('请选择奖励类型');
                return
            }
            if(_this.item.level === undefined){
                this.$message.warning('请选择层级');
                return
            }
            if(_this.item.awardNumber === ''){
                this.$message.warning('请输入奖励数量');
                return
            }
            const params = {
                'brandId': _this.item.brandId,
                // 'id': _this.item.id,
                'awardModel': _this.item.awardModel,
                'accountType': _this.item.accountType,
                'level': _this.item.level,
                'isPercent': _this.item.isPercent,
                'onOff': _this.item.onOff,
                'awardNumber': _this.item.isPercent == 1 ? (_this.item.awardNumber / 100) : _this.item.awardNumber,
            }
            updateAwardModelNumberConfig(params)
            .then(res=>{
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: _this.item.id ? '修改成功' : '添加成功',
                        duration: 8,
                    })
                    _this.visible = false
                    _this.getBanner()
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        beforeUpload(file) {
            this.fileList = [...this.fileList, file];
            return false;
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        handleChange({ fileList }) {
            this.fileList = fileList;
        },
        handleCancel() {
            this.previewVisible = false;
        },
        // 预览图片
        showImg(imgs){
            if(imgs){
                this.showImgs = imgs.split(',')
                console.log(this.showImgs,'imgs')
                this.previewImgVisible = true
            }
        },
        getImgUrl(i){
            return this.showImgs[i]
        },
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getBanner()
        },
        // 更换品牌后，需要查询分类和数据
        async getAllData(){
            this.getBanner() 
        },
        // 切换tab
        async changeClassification(key){
            this.isload = true
            this.activeKey = key
            setTimeout(()=>{
                this.getBanner();
            },500)
        },
        // 修改总开关状态
        changeAllOnOff(){
            console.log(this.allItem)
            if(this.allItem.id == ''){
                return;
            }
            let _this = this
            const params = {
                // 'id':_this.allItem.id,
                'brandId':_this.allItem.brandId,
                'awardModel':_this.allItem.awardModel,
                'accountType':_this.allItem.accountType,
                'level':_this.allItem.level,
                'awardNumber':_this.allItem.awardNumber,
                'onOff':_this.allItem.onOff == 1 ? 0 : 1,
                'isPercent': _this.allItem.isPercent,
            }
            updateAwardModelNumberConfig(params)
            .then(res=>{
                _this.confirmLoading = false
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: '修改成功',
                        duration: 8,
                    })
                    _this.visible = false
                    _this.getBanner(0)
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        }
    }
}

</script>
<style scoped>
.imgUrl{
    width: 180px;
    height: 100px;
}
.ant-carousel >>> .slick-slide img {
    text-align: center;
    height: 300px;
    line-height: 300px;
    background: #364d79;
    overflow: hidden;
    width: 100%;
}
.ant-carousel >>> .slick-thumb {
  bottom: -15px;
}
.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
</style>